<template>
	  
	<div>
		    
		<table border="1">
			      
			<tbody>
				        
				<tr v-for="item in shop" :key="item.name">
					          
					<td>{{ item.name }}</td>
					          
					<td>{{ item.count | unit }}</td>
					          
					<td>{{ item.money | fixed | Add$ }}</td>
					          
					<td>{{ (item.money * item.count) | fixed | Add$ }}</td>
					        
				</tr>
				      
			</tbody>
			    
		</table>
		  
	</div>
</template>
<script>
export default {
	filters: {
		unit(value) {
			if (value === '') {
				return value
			}
			return value + '(个)'
		},
		fiext(value) {
			let val = Number(value)
			if (!isNaN(val)) {
				// 取小数位
				return val.toFixed(2) + '元'
			} else {
				return val
			}
		},
	},
	data() {
		return {
			shop: [
				{ name: '手机', count: 3, money: 4506.77 },
				{ name: '电脑', count: 2, money: 9999.99 },
				{ name: '平板', count: 9, money: 1999.99 },
			],
		}
	},
}
</script>